<template>

	<view class="container">
		<view class="date">
			<rich-text :nodes="list.NewsContent" @itemclick="handleRich"></rich-text>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				list: '',
			}
		},
		onLoad(event) {
			this.id = event.id;
			// console.log('打印id',this.id);
			this.hqxwxq()
			uni.setNavigationBarTitle({
			  title:  this.$t('wenzhangxq'), // 必填，页面标题）
             })
		},
		methods: {
			hqxwxq() {
				let data = {
					id: this.id
				}
				let opts = {
					url: '/News/GetNewsId',
					method: 'GET'
				};
				this.api.httpTokenRequest(opts, data).then(res => {
					// console.log('res===',res);
					if (res[1].data.state == "success") {
						var jsonDa = JSON.stringify(res[1].data.list[0]).replace(/<img/gi, "<img class='richImg'");
						this.list = JSON.parse(jsonDa);
					} else {
						this.$modal.msg(res[1].data.msg)
					}
				}, error => {
					console.log(error);
				})

			},
			//处理点击事件
			 handleRich(e){
				// console.log('点击要预览的图片',e.detail.node.attrs.src,e);
				let imgPath = e.detail.node.attrs.src;
				this.handlePreViewImage(imgPath);
			},
			//预览和长按保存图片
			 handlePreViewImage(imgPath) {
				let arr = [];
				arr.push(imgPath);
				uni.previewImage({
					urls: arr,
					longPressActions: {
						itemList: ['保存图片到相册'],
						success: function(data) {
							console.log(data.tapIndex);
							if (data.tapIndex == 0) {
								uni.saveImageToPhotosAlbum({
									filePath: imgPath,
									success: function() {
										uni.showToast({
											title: '保存成功',
											duration: 2000
										});
									}
								});
							}
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
				}
			}
		}
</script>

<style>
	.container {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.bt {
		width: 90%;
		height: 42rpx;
		font-size: 44rpx;
		display: flex;
		justify-content: center;
		font-family: PingFang SC;
		font-weight: bold;
		margin-top: 32rpx;
		margin-bottom: 40rpx;

	}

	.date {
		width: 90%;
		font-size: 32rpx;
		margin-top: 40rpx;
		font-family: PingFang SC;
		font-weight: 500;

	}

	.datetime {
		width: 90%;
		margin-top: 10rpx;
		color: #B3B3B3;
		font-size: 24rpx;
		text-align: end;
	}

	/* 富文本图片样式 */
	rich-text .richImg {
		max-width: 100%;
		max-height: 100%;
		vertical-align: middle;
		height: auto !important;
		width: auto !important;
	}
</style>